

import Vue from "vue"
import moment from "moment"

// 定义全局的过滤器  指令 
Vue.filter("timeFormat",(value,type)=>{
   if(!value) return "";
   moment.locale();         // zh-cn
   type = type || "YYYY-MM-DD HH:mm:ss"
   return moment(value).format(type);
})
Vue.filter("fixed",(value,n)=>{
  if(!value) return "";
  n = n ||2;
  return value.toFixed(n);
})
Vue.directive("shuibowen",{
  bind(el,binding){
      el.addEventListener("click",function(e){
          console.log("123123")
          var e = e || window.event;
          var x = e.clientX - el.offsetLeft;
          var y = e.clientY - el.offsetTop;
          var left = el.offsetLeft
          var top = el.offsetTop;

          var span = document.createElement("span");
          span.style.pointerEvents = 'none';
          span.style.position = "absolute"
          span.style.left = x / 37.5 +'rem'
          span.style.top = y  / 37.5 + 'rem'
          span.style.borderRadius = '50%';
          var bg = binding.value || 'rgba(0,0,0,0.5)';

          // 获取el 父元素的 背景颜色  
          span.style.background = bg;


          el.append(span);
          var height = 0
          var width = 0;
          var opacity = 1;
          var timer = setInterval(()=>{
              height+=6;
              width+=6;
              opacity-=0.03;
              
              span.style.left = x - span.clientWidth /2 / 37.5 + 'rem'
              span.style.top = y - span.clientHeight  /2/ 37.5  + 'rem'

              span.style.width = width + 'px'
              span.style.height = height + 'px'
              span.style.opacity = opacity
              if(opacity<0){
                  clearInterval(timer);
                  span.remove();
              }
          },10);
      })
  },
  inserted(el,binding){

  }
})